import React from 'react'
import { connect } from 'dva';
import {Carousel,Badge,Tabs,Flex,WingBlank,Icon,WhiteSpace,List } from 'antd-mobile'
import Rate from 'react-tiny-rate'
import { StickyContainer, Sticky } from 'react-sticky'
import Marked from "marked"
import styles from './Classinfo.css'
import constan from '../constan';

const tabs = [
  { title: <Badge>简介</Badge> },
  { title: <Badge>目录</Badge> }
];
const basictabstyle = {
  display: 'flex', flexDirection:'column',alignItems: 'start', justifyContent: 'start', minHeight:800
}
function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
class Classinfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      classinfo:{
        classname:'帮你省时90%的Excel图表模板大法',
        rate:3,
        learningnum:1214,
        price:120.00,
        profname:'刘万象',
        profstunum:16000,
        classmarkedtext:'**在这里导入marked文档** \n ```后台采用marked输入文章，储存在数据库中```'
      },
      classmenu:[
        {subtitle:'开始之前',sublist:[
          {name:'1.1 课程说明，免费阅读',url:'',ava:true},
          {name:'1.2 课程说明，免费阅读',url:'',ava:true},
          {name:'1.3 课程说明',url:'',ava:false},
          {name:'1.4 课程说明',url:'',ava:false}
        ]},
        {subtitle:'颜色库的导入与使用',sublist:[
          {name:'1.1 课程说明，免费阅读',url:'',ava:false},
          {name:'1.2 课程说明，免费阅读',url:'',ava:false},
          {name:'1.4 课程说明，免费阅读',url:'',ava:true},
          {name:'1.3 课程说明，免费阅读',url:'',ava:false}
        ]},
        {subtitle:'模板库的导入与使用',sublist:[
          {name:'1.1 课程说明，免费阅读',url:'',ava:true},
          {name:'1.2 课程说明，免费阅读',url:'',ava:false}
        ]},
        {subtitle:'10套商业图表模板的风格介绍与使用说明',sublist:[
          {name:'1.1 课程说明，免费阅读',url:'',ava:true}
        ]}
      ]
    }
  }
  componentDidMount(){
    const {cid} = this.props.match.params;
    // const {user} = this.props;
    this.props.dispatch({type: 'lecture/getLectureR', payload:{cid}});
    this.props.dispatch({type:'lecture/getLecture', payload:{cid}});

  }
  rawMarkup() {
    const { lecture } = this.props;
    var rawMarkup = Marked(lecture.intro.toString(), {sanitize: true});
    return { __html: rawMarkup };
  }
  classmenulist(){
    const { chapter} = this.props.lecture;
    let temp=chapter.map((item,i) => (
      <List renderHeader={item.name} key = {i}>
        {
          item.video.map((subitem,j)=>(
            <List.Item key = {`${i}_${j}`} wrap extra={subitem.ava?'可试读':''} arrow={"horizontal"}>
              {subitem.name}
            </List.Item>
          ))
        }
      </List>
    ))
    return(
      <div className = {styles.fullwidth}>
        {temp}
      </div>
    )
  }

  addinCart(){
    const {cid} = this.props.match.params;
    console.log(cid);
    this.props.dispatch({type:'classrelation/addincart',payload:{cid}});
  }
  render(){
    const {lecture} = this.props;
    const {user} = this.props;
    let bottomDom = (
      <div className = {styles.bottombar}>
        <div className = {styles.bottomleft}
          onClick = {()=>this.addinCart()}
        >
        <span>
            加入购物车
        </span>
        </div>
        <div className = {styles.bottomright}>
        <span>
            立即购买
        </span>
        </div>
      </div>
    );
    if (user.login_state === constan.SuccessLogin &&
        lecture.lectureAuth.buy === 1
    ) {
      bottomDom = (
        <div className = {styles.bottombar+" "+styles.singlebottom}>
          <span>
            进入学习
            </span>
        </div>
      )
    }
    return (
      <div>
        <Carousel
          autoplay={false}
        >
          <img
            src={lecture.startpic}
            alt=""
            style={{ width: '100%', verticalAlign: 'top' }}
          />
        </Carousel>
        <StickyContainer>
          <Tabs tabs={tabs}
            initalPage={1}
            renderTabBar={ renderTabBar }
          >
            <div style={basictabstyle}>
              <div className={styles.introbox1}>
                <p className={styles.introbox1_ptitle}>{lecture.classname}</p>
                <Flex className={styles.intobox_flex}>
                  <Rate value={ lecture.rate } readonly={true} color="blue" size='18px'></Rate>
                  <p className={styles.introbox1_psubtitle}>{ lecture.rate }分</p>
                  <WingBlank />
                  <p className={styles.introbox1_psubtitle}>{lecture.learningnum}人在学</p>
                </Flex>
                <p className={styles.introbox1_pprice}>￥{lecture.price}</p>
              </div>
              <WhiteSpace/>
              <div className={styles.introbox2}>
                  <div className={styles.introbox2_leftbox}>
                    <div className={styles.introbox2_imgbox}>
                      <img className={styles.introbox2_img} alt="介绍" src={lecture.teacher.photo}/>
                    </div>
                    <div className={styles.introbox2_textbox}>
                      <p className={styles.introbox2_profname}>{lecture.teacher.name}</p>
                      <p className={styles.introbox2_profstunum}>{160}位学员</p>
                    </div>
                  </div>
                  <div className={styles.introbox2_rightbox}>
                    详细信息<Icon type="right"/>
                  </div>
              </div>
              <WhiteSpace/>
              <div className={styles.introbox3}>
                <p className={styles.introbox3_ptitle}>课程介绍</p>
                <div className={styles.introbox3_main}>
                  <span dangerouslySetInnerHTML={this.rawMarkup()} />
                </div>
              </div>
            </div>
            <div style={basictabstyle}>
              {this.classmenulist()}
            </div>
            <div style={basictabstyle}>
              Content of first tab
            </div>
          </Tabs>
        </StickyContainer>
          {bottomDom}
      </div>
    )
  }
}
function mapStateToProps({lecture, user}) {
  return {
    lecture,
    user
  }
}
export default connect(mapStateToProps)(Classinfo);

